<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height:490px;
            width:800px;
            display: flex;
            border:1px solid #ccc;
            /* background: pink; */
            margin:0 auto;
        }
        .left{
            /* height:600px; */
            width:500px;
            /* background: red; */
        }
        .right{
            /* height:600px; */
            width:300px;
            /* background: blue; */
        }
        .ltop img{
            height:300px;
            width:450px;
            margin-top: 20px;
            margin-left: 30px;
            margin-bottom: 30px;   
        }
        .lbutto{
            display: flex;
            justify-content: space-around;
        }
        .lbutto img{
            height:100px;
            width:70px;
        }
        h4{
            font-size: 16px;
            font-weight: bold;
        }
        p{
            background: pink;
            height:80px;
            width:280px;
            font-size: 20px;
            font-weight: bold;
            color:red;
            padding-left: 20px;
            line-height: 80px;
        }

        ul li{
            list-style: none;
            height:30px;
            width:30px;
            font-size: 14px;
            text-align: center;
            line-height: 30px;
            border:1px solid #ccc;
            margin:3px 3px ;
        }
        ul span{
            height:30px;
            width:60px;
            text-align: center;
            line-height: 30px;
        }


        ul{
            display: flex;
        }

        .ysfl{
            color:#ccc;
            font-size: 12px;
            display: flex;
            justify-content:space-between;
            padding-left:50px;
            padding-right:60px;

        }
        .ysfl{
            list-style: none;
        }
        
        .ysfl img{
           height:30px;
           margin-left: 10px;

        }

        .bottom{
            padding-top:20px ;
            display: flex;
            justify-content:space-evenly;

        }

        .bottom span{
            display: block;
            font-size: 14px;
            text-align: center;
            line-height: 30px;
            height:30px;
            width:100px;
            /* background:red; */
            
        }
        .bottom span:first-child{
           background: papayawhip;
           color:rosybrown;
        }

        .bottom span:last-child{
            color:#fff;
              background:red;
        }


    </style>
</head>
<body>
    <div class="box" id="box">
        <!-- <div class="left">
            <div class="ltop">
                <img src="../images/01.jpg" alt="">
            </div>
            <div class="lbutto">
                <img src="../images/02.jpg" alt="">
                <img src="../images/03.jpg" alt="">
                <img src="../images/04.jpg" alt="">
                <img src="../images/05.jpg" alt="">
                <img src="../images/06.jpg" alt="">
            </div>
        </div>
        <div class="right">
            <h4>春秋正品老北京布鞋男款单鞋时尚休闲商务男鞋驾车透气软底鞋包邮</h4>
            <p>￥800</p>
            <ul>
                <span>尺码</span>
                <li>30</li>
                <li>40</li>
                <li>50</li>
                <li>43</li>
            </ul>

            <div class="ysfl">
                <span>颜色分类</span>
                <li><img src="../images/06.jpg" alt=""></li>
                <li><img src="../images/04.jpg" alt=""></li>
            </div>

            <div class="bottom">
                <span>立即购买</span>
                <span>加入购物车</span>

            </div> -->
        <!-- </div> -->


    </div>

    <script>
         var goodlist = [
            { id: 1, url: 'images/01.jpg', text: '现货包邮 本物制造 火花透镜 棱镜 神光棒 声光变身器', price: 19, sales:24},
            { id: 2, url: 'images/02.jpg', text: '现货包邮 本物制造 火花透镜 棱镜 神光棒 声光变身器', price: 98, sales:34},
            { id: 3, url: 'images/03.jpg', text: '现货包邮 本物制造 火花透镜 棱镜 神光棒 声光变身器', price: 99, sales:4},
            { id: 4, url: 'images/04.jpg', text: '现货包邮 本物制造 火花透镜 棱镜 神光棒 声光变身器', price: 90, sales:2},
            { id: 5, url: 'images/05.jpg', text: '现货包邮 本物制造 火花透镜 棱镜 神光棒 声光变身器', price: 98, sales:32},
            { id: 6, url: 'images/06.jpg', text: '现货包邮 本物制造 火花透镜 棱镜 神光棒 声光变身器', price: 66, sales:89},
            { id: 7, url: 'images/07.jpg', text: '现货包邮 本物制造 火花透镜 棱镜 神光棒 声光变身器', price: 98, sales:32},
            { id: 8, url: 'images/08.jpg', text: '现货包邮 本物制造 火花透镜 棱镜 神光棒 声光变身器', price: 66, sales:89}

        ]

          // search 获取url的参数
        var p = location.search; //?id=111&name=阿联酋美女1号  {id:111,name:'阿联酋美女1号}
        // 把字符串  只拿到 111
        // substring(start) 当只有一个 参数的时候 ，表示从start索引位置开始截取 最后
        p = p.substring(1) //截取的是?之后的所有字符
        var arr = p.split('=') //['id','111']
        var obj = {}; //把数组转换成对象
        obj[arr[0]] = arr[1]; //{id:111}
        // 拿id的属性值 去数据库匹配
        var res = goodlist.filter(function (item, index) {
            return item.id == obj.id
        })
        console.log(res);
        
       
     
        
        // res就是 根据id匹配=拿到的数据
        // 把数据渲染到页面

     
        console.log(res[0])

        box.innerHTML +=
            `<div class="left">
            <div class="ltop">
                <img src="${res[0].url}" alt="">
            </div>
            <div class="lbutto">
                <img src="images/02.jpg" alt="">
                <img src="images/03.jpg" alt="">
                <img src="images/04.jpg" alt="">
                <img src="images/05.jpg" alt="">
                <img src="images/06.jpg" alt="">
            </div>
        </div>
        <div class="right">
            <h4>春秋正品老北京布鞋男款单鞋时尚休闲商务男鞋驾车透气软底鞋包邮</h4>
            <p>￥${res[0].price}</p>
            <ul>
                <span>尺码</span>
                <li>30</li>
                <li>40</li>
                <li>50</li>
                <li>43</li>
            </ul>

            <div class="ysfl">
                <span>颜色分类</span>
                <li><img src="images/06.jpg" alt=""></li>
                <li><img src="images/04.jpg" alt=""></li>
            </div>

            <div class="bottom">
                <span>立即购买</span>
                <span>加入购物车</span>

            </div> 
         </div> `










    </script>









</body>

</html>